﻿<!DOCTYPE HTML>
<html>
<head>
	<title>CanvasJS Example - jQuery Line Chart</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="../../jquery.canvasjs.min.js"></script>
	<script type="text/javascript">
		$(function () {
			//Better to construct options first and then pass it as a parameter
			var options = {
				zoomEnabled: true,
				animationEnabled: true,
				title: {
					text: "Fertility Rate Vs Life Expectancy in different countries - 2009"
				},
				axisX: {
					title: "Life Expectancy",
					maximum: 85
				},
				axisY: {
					title: "Fertility Rate"

				},

				legend: {
					verticalAlign: "bottom",
					horizontalAlign: "left"

				},
				data: [
				{
					type: "bubble",
					legendText: "Size of Bubble Represents Population",
					showInLegend: true,
					legendMarkerType: "circle",
					legendMarkerColor: "grey",
					toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Life Exp</strong> {x} yrs<br/> <strong>Fertility Rate</strong> {y}<br/> <strong>Population</strong> {z}mn",

					dataPoints: [
					 { x: 78.1, y: 2.00, z: 306.77, name: "US" },
					 { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
					 { x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
					 { x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
					 { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
					 { x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
					 { x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
					 { x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
					 { x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
					 { x: 80.1, y: 1.94, z: 61.81, name: "UK" },
					 { x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
					 { x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
					 { x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
					 { x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
					 { x: 50.3, y: 5.58, z: 18.55, name: "Angola" }


					]
				}
				]
			};
			$("#chartContainer1").CanvasJSChart(options);
		});

		$(function () {
			//Better to construct options first and then pass it as a parameter
			var options = {
				title: {
					text: "Email Analysis"
				},
				animationEnabled: true,
				axisX: {
					interval: 3
				},
				axisY: {
					title: "Number of Messages"
				},
				legend: {
					verticalAlign: "bottom",
					horizontalAlign: "center"
				},

				data: [{
					name: "received",
					showInLegend: true,
					legendMarkerType: "square",
					type: "area",
					color: "rgba(40,175,101,0.6)",
					markerSize: 0,

					dataPoints: [
					{ x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 7 },
					{ x: new Date(2013, 0, 1, 01, 00), y: 8 },
					{ x: new Date(2013, 0, 1, 02, 00), y: 5 },
					{ x: new Date(2013, 0, 1, 03, 00), y: 7 },
					{ x: new Date(2013, 0, 1, 04, 00), y: 6 },
					{ x: new Date(2013, 0, 1, 05, 00), y: 8 },
					{ x: new Date(2013, 0, 1, 06, 00), y: 12 },
					{ x: new Date(2013, 0, 1, 07, 00), y: 24 },
					{ x: new Date(2013, 0, 1, 08, 00), y: 36 },
					{ x: new Date(2013, 0, 1, 09, 00), y: 35 },
					{ x: new Date(2013, 0, 1, 10, 00), y: 37 },
					{ x: new Date(2013, 0, 1, 11, 00), y: 29 },
					{ x: new Date(2013, 0, 1, 12, 00), y: 34, label: "noon" },
					{ x: new Date(2013, 0, 1, 13, 00), y: 38 },
					{ x: new Date(2013, 0, 1, 14, 00), y: 23 },
					{ x: new Date(2013, 0, 1, 15, 00), y: 31 },
					{ x: new Date(2013, 0, 1, 16, 00), y: 34 },
					{ x: new Date(2013, 0, 1, 17, 00), y: 29 },
					{ x: new Date(2013, 0, 1, 18, 00), y: 14 },
					{ x: new Date(2013, 0, 1, 19, 00), y: 12 },
					{ x: new Date(2013, 0, 1, 20, 00), y: 10 },
					{ x: new Date(2013, 0, 1, 21, 00), y: 8 },
					{ x: new Date(2013, 0, 1, 22, 00), y: 13 },
					{ x: new Date(2013, 0, 1, 23, 00), y: 11 }
					]
				},
				{
					name: "sent",
					showInLegend: true,
					legendMarkerType: "square",
					type: "area",
					color: "rgba(0,75,141,0.7)",
					markerSize: 0,
					label: "",
					dataPoints: [

					{ x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 12 },
					{ x: new Date(2013, 0, 1, 01, 00), y: 10 },
					{ x: new Date(2013, 0, 1, 02, 00), y: 3 },
					{ x: new Date(2013, 0, 1, 03, 00), y: 5 },
					{ x: new Date(2013, 0, 1, 04, 00), y: 2 },
					{ x: new Date(2013, 0, 1, 05, 00), y: 1 },
					{ x: new Date(2013, 0, 1, 06, 00), y: 3 },
					{ x: new Date(2013, 0, 1, 07, 00), y: 6 },
					{ x: new Date(2013, 0, 1, 08, 00), y: 14 },
					{ x: new Date(2013, 0, 1, 09, 00), y: 15 },
					{ x: new Date(2013, 0, 1, 10, 00), y: 21 },
					{ x: new Date(2013, 0, 1, 11, 00), y: 24 },
					{ x: new Date(2013, 0, 1, 12, 00), y: 28, label: "noon" },
					{ x: new Date(2013, 0, 1, 13, 00), y: 26 },
					{ x: new Date(2013, 0, 1, 14, 00), y: 17 },
					{ x: new Date(2013, 0, 1, 15, 00), y: 23 },
					{ x: new Date(2013, 0, 1, 16, 00), y: 28 },
					{ x: new Date(2013, 0, 1, 17, 00), y: 22 },
					{ x: new Date(2013, 0, 1, 18, 00), y: 10 },
					{ x: new Date(2013, 0, 1, 19, 00), y: 9 },
					{ x: new Date(2013, 0, 1, 20, 00), y: 6 },
					{ x: new Date(2013, 0, 1, 21, 00), y: 4 },
					{ x: new Date(2013, 0, 1, 22, 00), y: 12 },
					{ x: new Date(2013, 0, 1, 23, 00), y: 14 }
					]
				}
				]
			};
			$("#chartContainer2").CanvasJSChart(options);
		});

		$(function () {
			//Better to construct options first and then pass it as a parameter
			var options = {
				title: {
					text: "Cumulative App downloads on iTunes And Play Store"
				},
				animationEnabled: true,
				axisY: {
					includeZero: false,
					maximum: 110000,
					valueFormatString: "#0,.",
					suffix: " k"
				},
				axisX: {
					title: "Months After Launch"
				},
				toolTip: {
					shared: true,
					content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> {y}"
				},

				data: [
				{
					type: "splineArea",
					showInLegend: true,
					name: "iOS",
					dataPoints: [
					{ x: 1, y: 3000 },
					{ x: 2, y: 7000 },
					{ x: 3, y: 10000 },
					{ x: 4, y: 14000 },
					{ x: 5, y: 23000 },
					{ x: 6, y: 31000 },
					{ x: 7, y: 42000 },
					{ x: 8, y: 56000 },
					{ x: 9, y: 64000 },
					{ x: 10, y: 81000 },
					{ x: 11, y: 105000 }
					]
				},
				{
					type: "splineArea",
					name: "Android",
					showInLegend: true,
					dataPoints: [
					{ x: 4, y: 4000 },
					{ x: 5, y: 6000 },
					{ x: 6, y: 9000 },
					{ x: 7, y: 14000 },
					{ x: 8, y: 21000 },
					{ x: 9, y: 31000 },
					{ x: 10, y: 46000 },
					{ x: 11, y: 61000 }

					]
				}
				]
			};
			$("#chartContainer3").CanvasJSChart(options);
		});

		$(function () {
			//Better to construct options first and then pass it as a parameter
			var options = {
				title: {
					text: "Gaming Consoles Sold in 2012"
				},
				animationEnabled: true,
				legend: {
					verticalAlign: "bottom",
					horizontalAlign: "center"
				},
				data: [
				{
					type: "pie",
					showInLegend: true,
					toolTipContent: "{y} - <strong>#percent%</strong>",
					dataPoints: [
						{ y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
						{ y: 2175498, legendText: "Wii", indexLabel: "Wii" },
						{ y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },
						{ y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },
						{ y: 1727161, legendText: "PSP", indexLabel: "PSP" },
						{ y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
						{ y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
					]
				}
				]
			};
			$("#chartContainer4").CanvasJSChart(options);
		});
	</script>
</head>
<body>
	<div id="chartContainer1" style="width: 49.6%; height: 400px;display: inline-block;"></div>
	<div id="chartContainer2" style="width: 49.6%; height: 400px;display: inline-block;"></div><br />
	<div id="chartContainer3" style="width: 49.6%; height: 400px;display: inline-block;"></div>
	<div id="chartContainer4" style="width: 49.6%; height: 400px;display: inline-block;"></div>
</body>
</html>